<template>
  <div class="app-container Blog">
      <hz-search title="访问日志管理" :havuSearch='false'></hz-search>
     <hz-table
        :label-data="tableData.cloumn"
        :table-data="tableData.data"
        :counts="count"
        pagi
        :load="loading"
        @selection-change="getSelectionChange"
        :current-page="this.searchParams.page"
        @pageChange="getCurrentPage"
      >
        <!-- <el-table-column prop="label" label="分类名称" > </el-table-column> -->
        <el-table-column label="访问时间" width="180" >
          <template slot-scope="scope">
            {{time(scope.row.loginTime)}}
          </template>
        </el-table-column>
        <el-table-column label="操作" >
          <template slot-scope="scope">
            <span class="tb-delete" @click="deleteRow(scope.row)">移除</span>
          </template>
        </el-table-column>
    </hz-table>
  </div>
</template>

<script>
import { time } from '@/utils/tool'
import {getUserLoginLogList, postDeleteUserLoginLog} from '@/api/modules/system'
import HzSearch from '../../../components/compon/HzSearch.vue'
import HzTable from '../../../components/compon/HzTable.vue'
export default {
  components: { HzSearch, HzTable },
  name: 'Blog',
  data () {
    return {
      searchParams: {
        page: 1,
        rows: 5
      },
      loading: false,
      count: 0,
      tableData: {
        cloumn: [
          { label: '访问平台', prop: 'passName' },
          { label: '用户名', prop: 'userName' },
          { label: '用户昵称', prop: 'nickName' },
          { label: '访问IP', prop: 'userIp' },
          { label: '访问地点', prop: 'userSite' }
        ],
        data: []
      },
      dialogType: '',
      dialogFormVisible: false,
      form: {},
      // 表单校验
      rules: {
        role: [
          { required: true, message: '用户类型不能为空', trigger: 'blur' }
        ],
        userName: [
          { required: true, message: '用户名称不能为空', trigger: 'blur' }
        ],
        nickName: [
          { required: true, message: '用户昵称不能为空', trigger: 'blur' }
        ],
        password: [
          { required: true, message: '用户密码不能为空', trigger: 'blur' }
        ],
        email: [
          {
            type: 'email',
            message: "'请输入正确的邮箱地址",
            trigger: ['blur', 'change']
          }
        ],
        phoneNumber: [
          {
            pattern: /^1[3|4|5|6|7|8|9][0-9]\d{8}$/,
            message: '请输入正确的手机号码',
            trigger: 'blur'
          }
        ]
      },
      //  搜索栏
      searchActionData: [{
        tip: '添加用户', icon: 'el-icon-circle-plus-outline', handleClick: this.handleAdd, auth: () => { return true }
      }
      ]
    }
  },
  computed: {
    time () {
      return time
    }
  },
  created () {
    this.fetch()
  },
  methods: {
    // 获取列表
    async fetch () {
      this.loading = true
      const res = await getUserLoginLogList(this.searchParams)
      this.tableData.data = res.rows
      this.count = res.total
      this.loading = false
    },
    // 删除分类
    deleteRow (row) {
      this.$confirm('此操作将永久删除该文件, 是否继续?', '提示', {
        confirmButtonText: '确定',
        cancelButtonText: '取消',
        type: 'warning'
      }).then(async () => {
        await postDeleteUserLoginLog({ id: row._id })
        this.$message({
          type: 'success',
          message: '删除成功!'
        })
        this.fetch()
      })
    },
    // 下拉框选择每页显示条数
    getSelectionChange (val) {
      this.searchParams.rows = val
      this.searchParams.page = 1
      this.fetch()
    },
    // 切换分页
    getCurrentPage (val) {
      this.searchParams.page = val
      this.fetch()
    }
  }
}
</script>

<style  lang="scss" scoped>

</style>
